<template>
  <view>
    <!-- <nav-bar title="技师统计"></nav-bar> -->
    <scroll-view scroll-y :style="{ height: mainHeight, paddingBottom: '40rpx' }">
      <!-- <view class="time-box">
        <view class="text">选择门店</view>
        <view class="time-list">
          <view>金牛湖店 </view>
        </view>
      </view> -->
      <view class="time-box">
        <view class="text">时间</view>
        <view class="date">
          <uni-datetime-picker :clear-icon="false" v-model="range" type="daterange" @change="maskClick" />
        </view>
        <!-- <view class="time-list">
          <view>{{ beginTime }}-{{ endTime }} </view>
          <view class="icon"><u-icon name="arrow-down" color="#6f6f6f" size="15"></u-icon></view>
        </view> -->
      </view>
      <!-- <view class="content"><tab-index @tabClick="tabClick"></tab-index></view> -->
      <view class="time-box">
        <view class="text">选择员工</view>
        <view class="time-list">
          <view>{{ people?people:'姓名' }} </view>
          <view class="icon" @click="show = true"><u-icon name="arrow-down" color="#6f6f6f" size="15"></u-icon></view>
        </view>
      </view>
      <view class="time-box">
        <view class="text">依据总收益金额排序</view>
      </view>

      <view v-for="(item, index) in masterData" :key="index">
        <view class="name">{{ item.name }}</view>
        <view class="table">
          <view class="box">
            <view style="width: 50%;">总收益</view>
            <view style="width: 50%;">{{ item.sumEarnings }} 元</view>
          </view>
          <view class="box">
            <view style="width: 50%;">项目服务提成</view>
            <view style="width: 50%;">{{ item.itemEarnings }} 元</view>
          </view>
          <view class="box">
            <view style="width: 50%;">附加商品提成</view>
            <view style="width: 50%;">{{ item.productEarnings }} 元</view>
          </view>
          <view class="box">
            <view style="width: 50%;">包间提成</view>
            <view style="width: 50%;">{{ item.compartmentEarnings }} 元</view>
          </view>
          <view class="box">
            <view style="width: 50%;">卡项提成</view>
            <view style="width: 50%;">{{ item.valueEarnings }} 元</view>
          </view>
        </view>
      </view>

    </scroll-view>
    <view>
      <u-picker :show="show" :columns="columns" @cancel="show = false" @confirm="workerClick"></u-picker>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/index.vue'
import tabIndex from '../../../components/statis/tab-index.vue'
import { getMaster, getAllMaster } from "@/api/system/static"
export default {
  name: 'earning',
  components: { NavBar, tabIndex },
  data() {
    return {
      mainHeight: '',
      beginTime: '2023.5.30',
      endTime: '2023.5.30',
      range: [],
      selectId:'',
      show: false,
      columns: [
        // ['中国', '美国', '日本']
      ],
      tableData: [
        {
          title: '总收益',
          value: 'sumEarnings'
        },
        {
          title: '项目服务提成',
          value: 'itemEarnings'
        },
        {
          title: '附加商品提成',
          value: 'productEarnings'
        },
        {
          title: '包间提成',
          value: 'compartmentEarnings'
        },
        {
          title: '卡项提成',
          value: 'valueEarnings'
        }
      ],
      masterData: [
        // {
        //   name: '张三',
        //   tableData: [
        //     {
        //       name: '哈哈哈',
        //       phone: '18771319801',
        //       number: '20',
        //       times: '3',
        //       type: 1
        //     },
        //     {
        //       name: '哈哈哈',
        //       phone: '18771319801',
        //       number: '20',
        //       times: '3',
        //       type: 1
        //     },
        //     {
        //       name: '哈哈哈',
        //       phone: '18771319801',
        //       number: '20',
        //       times: '3',
        //       type: 1
        //     },
        //     {
        //       name: '哈哈哈',
        //       phone: '18771319801',
        //       number: '20',
        //       times: '3',
        //       type: 1
        //     }
        //   ],

        // },
        // {
        //   name: '李四',
        //   tableData: [
        //     {
        //       name: '哈哈哈',
        //       phone: '18771319801',
        //       number: '20',
        //       times: '3',
        //       type: 1
        //     },
        //     {
        //       name: '哈哈哈',
        //       phone: '18771319801',
        //       number: '20',
        //       times: '3',
        //       type: 1
        //     },
        //     {
        //       name: '哈哈哈',
        //       phone: '18771319801',
        //       number: '20',
        //       times: '3',
        //       type: 1
        //     },
        //     {
        //       name: '哈哈哈',
        //       phone: '18771319801',
        //       number: '20',
        //       times: '3',
        //       type: 1
        //     }
        //   ],

        // }
      ],

      projectData: [
        {
          title: '金牛湖店',
          number: '12311111112',
          name: '颈肩推拿60分钟',
          nickName: '李四',
          phone: '18771319801',
          date: '2023年06月12日',
          time: '12点02分22秒',
          earn: '200'
        },
        {
          title: '金牛湖店',
          number: '12311111112',
          name: '颈肩推拿60分钟',
          nickName: '李四',
          phone: '18771319801',
          date: '2023年06月12日',
          time: '12点02分22秒',
          earn: '200'
        },
        {
          title: '金牛湖店',
          number: '12311111112',
          name: '颈肩推拿60分钟',
          nickName: '李四',
          phone: '18771319801',
          date: '2023年06月12日',
          time: '12点02分22秒',
          earn: '200'
        }
      ],
      peopleData: [],
      people:'',
      selectId:'',
      form:{}
    }
  },
  created() {
    this.mainHeight = this.$store.getters.heightData.noTabMainHeight + 'px'
    this.getAllMaster()
    this.getData()
  },
  methods: {
    getAllMaster() {
      getAllMaster().then((res) => {
        const data = res.rows.map((item) => {
          return item.name
        })
        this.columns.push(data)
        this.peopleData = res.rows
      })
    },
    getData() {
      const params = {
        timeList:this.range,
        technicianId:this.selectId
      }
      getMaster(params).then((res) => {
        this.masterData = res.rows
        // this.masterData = res.rows.map((item) => {
        //   return Object.assign({},{ name:item.name})
        // })
        // // this.tableData = res.rows
       
        //   this.tableData.forEach((tItem) => {
        //     // tItem.value = item[tItem.value]
        //     res.rows.forEach((item) => {
        //       tItem.value = item[tItem.value]
        //     })
        //   })
      })
    },
    tabClick(item) {
    },
    handelClick(item, index) {
      this.activeIndex = index
    },
    maskClick(e) {
      this.getData()
    },
    workerClick(e) {
      this.show = false
      this.people = e.value[0]
      const index = this.peopleData.findIndex((item) => {
        return item.name == this.people
      })
      this.selectId = this.peopleData[index].id
      this.getData()
    }

  }

}
</script>

<style lang="scss" scoped>
.content {
  padding: 30rpx 30rpx 0;
}

.time-box {
  margin-top: 20rpx;
  padding: 0 30rpx;
  display: flex;

  .text {
    font-size: 36rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #000000;
    margin-right: 20rpx;
    line-height: 68rpx;
  }

  .time-list {
    display: flex;
    height: 68rpx;
    background-color: #fff;
    line-height: 68rpx;
    border-radius: 12rpx;
    font-size: 36rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #000000;
    padding: 0 30rpx;

    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 10rpx;
    }
  }
}

.name {
  margin: 25rpx 30rpx;
  font-size: 50rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  color: #000000;
}

.table {
  background: #FFFFFF;
  border-radius: 15rpx 15rpx 15rpx 15rpx;
  opacity: 1;
  margin: 25rpx 30rpx;


  .box {
    display: flex;
    text-align: center;
    padding: 26rpx 20rpx;
    border-bottom: 1rpx solid #e7e7e7;
    font-size: 39rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #000000;

    &:last-child {
      border-bottom: none;
    }

    &:first-child {
      background: #FFF9EF;
      border-radius: 15rpx 15rpx 0rpx 0rpx;
      border-bottom: none;
    }

  }

  .head {
    display: flex;
    text-align: center;
    padding: 26rpx 20rpx;
    background: #FFF9EF;
    font-size: 36rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #333333;
  }
}
</style>